const { PureComponent } = require("react");

function foo(WraperComponent) {
  return props => (
    <div>
      <header>头部</header>
      <WraperComponent {...props} name="wc"></WraperComponent>
      <footer>底部</footer>
    </div>
  )
}

function bar(WraperComponent) {
  return props => (
    <div>
      <nav>导航</nav>
      <WraperComponent {...props} age="18"></WraperComponent>
    </div>
  )
}

// 在使用高阶组件时，可能造成props丢失，如何解决？
// 答：props穿透
@foo
@bar
class DemoA extends PureComponent {
  render() {
    console.log(this.props);
    return (
      <div>
        <h1>类组件</h1>
      </div>
    )
  }
}

// export default foo(DemoA);
// export default DemoA;

// export default foo(bar(DemoA));
export default DemoA;